<template>
  <div class="form-block-title-container">
    <span class="form-block-title">
      {{ this.title }}
    </span>
    <span class="form-block-left-remark">
      <slot name="leftRemark"></slot>
    </span>
    <span class="form-block-right-remark">
      <slot name="rightRemark"></slot>
    </span>
    <span class="clearfix"></span>
  </div>
</template>

<script>
export default {
  name: 'FormBlockTitle',
  props: {
    title: {
      required: true,
      type: String
    }
  }
}
</script>

<style scoped>
.form-block-title-container {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
  padding: 10px 0;
}

.form-block-title {
  font-size: 16px;
  color: rgba(0, 0, 0, .85);
  float: left;
}

.form-block-left-remark {
  float: left;
  font-size: 12px;
  line-height: 18px;
  color: #a1a3a8;
  margin-left: 10px;
}

.form-block-right-remark {
  float: right;
  font-size: 12px;
  line-height: 18px;
  color: #a1a3a8;
}

.clearfix {
  clear: both;
}
</style>
